<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2025-02-28 15:00:16
-->
<template>
  <el-dialog v-model="model" :align-center="props.alineCenter" :draggable="props.draggable" :overflow="props.overflow"
    :show-close="props.showClose" :destroy-on-close="destroyDialog" :center="props.center" :modal="props.modal"
    :append-to-body="props.appendBody" :header="props.title" :width="props.width" :before-close="closeDialog"
    modal-class="dialog-class" class="dialog-style" :close-on-click-modal="props.clickBlankToClose">


    <!-- 自定义头部 -->
    <template #header="{ titleId, titleClass }">
      <div class="flex flex-row justify-between gap-4">
        <h4 :id="titleId" :class="titleClass">{{ props.title }}</h4>
      </div>
    </template>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
    </template>

    <!-- content -->
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="180px">
      <el-form-item label="当前通知地址：" v-if="formData.currentEmail">
        <span>{{ formData.currentEmail }}</span>
      </el-form-item>
      <el-form-item label="新通知地址：" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getEmailApi, setEmailApi } from '@/utils/api.js';
import { ElMessage } from 'element-plus'

const props = defineProps({
  appendBody: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: "600",
  },
  // 可通过 插槽自定义
  title: {
    type: String,
    default: "设置通知邮箱",
  },
  // 遮罩层
  modal: {
    type: Boolean,
    default: true,
  },
  // 关闭按钮显示状态
  showClose: {
    type: Boolean,
    default: true,
  },
  // 使对话框水平垂直居中
  alineCenter: {
    type: Boolean,
    default: true,
  },
  // 内容居中
  center: {
    type: Boolean,
    default: false,
  },
  // 关闭时销毁=== v-if
  destroyDialog: {
    type: Boolean,
    default: true,
  },
  // 拖拽
  draggable: {
    type: Boolean,
    default: false,
  },
  // 让拖拽范围超出可视区
  overflow: {
    type: Boolean,
    default: false,
  },
});
const ruleFormRef = ref(null)
const formData = reactive({
  currentEmail: '',
  email: ''
})
const rules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ]
}
// 获取当前邮箱
const getCurrentEmail = async () => {
  try {
    const res = await getEmailApi()
    if (res.code === 200) {
      formData.currentEmail = res.data ||''
    }
  } catch (error) {
    console.error('获取邮箱失败：', error)
  }
}
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      try {
        const res = await setEmailApi(formData.email)
        if (res.code === 200) {
          ElMessage.success('邮箱修改成功')
          getCurrentEmail()
          closeDialog()
        }
      } catch (error) {
        console.error('修改邮箱失败：', error)
        ElMessage.error('修改邮箱失败')
      }
      formData.email = ''
    }
  })
}
// 监听弹窗打开
onMounted(() => {
  formData.email = ''
  getCurrentEmail()
})
const model = defineModel();

const closeDialog = () => {
  model.value = false;
};
</script>
<style scoped lang="less">
.dialog-style {
  .el-dialog__body {
    padding: 20px;
  }
}
</style>